<template>
  <div class="wang-editor-container">
    <Toolbar :editor="editorRef" style="border-bottom: 1px solid #e8e8e8" />
    <Editor
      v-model="html"
      class="wang-editor-content"
      :default-config="editorConfig"
      style="height: 300px"
      @on-created="handleCreated"
      @onChange="handleChange"
    />
    <!-- <div class="wang-editor-footer">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useUserStore } from '@/store/modules/user'
  import '@wangeditor/editor/dist/css/style.css'
  import { IDomEditor } from '@wangeditor/editor'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { baseURL } from '@/config'
  const { token } = useUserStore()
  const props = defineProps({
    content: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['richText'])
  const $baseMessage: any = inject('$baseMessage')
  const $baseAlert: any = inject('$baseAlert')
  const editorRef = shallowRef<IDomEditor | undefined>(undefined)
  const html = ref(props.content)
  watch(
    () => props.content,
    () => {
      html.value = props.content
    }
  )
  const editorConfig = ref({
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        server: `${baseURL}/WF_Document/UploadFile`, // 你的服务器地址，注意：当前接口格式特殊与其他vab接口不同，请查看vip文档
        fieldName: 'fileInput',
        allowedFileTypes: ['image/*'],
        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 5 * 1024 * 1024, // 1M
        headers: {
          Authorization: `Bearer ${token}`,
        }, // 如需传递token请写到在这里
        onSuccess(file: { name: any }, res: { data: string }, insertFn: any) {
          console.log(insertFn)
          ImgUrl.value = res.data
        },
        onFailed(file, res) {
          console.log(res.message)
        },
        customInsert(res, insertFn) {
          console.log('customInsert', res)
          const url = res.data
          insertFn(url)
        },
        onError(file, res) {
          $baseMessage('上传失败', 'error', 'vab-hey-message-success')
        },
      },
    },
  })

  const handleCreated = (editor: IDomEditor) => {
    console.log(editor)
    editorRef.value = editor
  }
  const handleChange = (editor) => {
    console.log(editor.getHtml())
    html.value = editor.getHtml()
    emit('richText', html.value)
  }
  onBeforeUnmount(() => {
    console.log(editor)
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
</script>

<style lang="scss">
  .wang-editor-container {
    padding: 0 !important;
    // margin: -19px -19px 19px -19px;
    overflow: hidden !important;
    background: $base-color-background !important;

    &.w-e-full-screen-container {
      z-index: 9999 !important;
    }

    [classname='w-e-toolbar-init'] {
      border-bottom: 1px solid #e8e8e8 !important;
    }

    .wang-editor-content {
      width: 70%;
      height: 500px !important;
      padding: 0px 40px 0 40px;
      margin: 20px auto 20px auto;
      background-color: #fff;
      border: 0;
    }

    .wang-editor-footer {
      width: 70%;
      margin: auto;
    }

    @media (max-width: 576px) {
      .wang-editor-title,
      .wang-editor-content,
      .wang-editor-footer {
        width: 90%;
      }
    }
  }
</style>
